<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #first {}
    </style>
</head>

<body>
    <ul class="list one">
        123123123
        <li class="first">01</li>
        <li>02</li>
        <li class="mid">03</li>
        <li>04</li>
        <li>05</li>
        <!-- <li class="last">06</li> -->456456
    </ul>
</body>
<script>
    // 节点层级关系
    // 父节点
    // 子节点
    // 同胞节点

    var ul = document.getElementsByClassName("list")[0];
    var mid = document.getElementsByClassName("mid")[0];


    // 子节点 子元素
    // Element.childNodes  子节点(元素节点 文本节点 注释节点)
    // Element.children    子元素(元素节点)

    console.log(ul.childNodes);
    console.log(ul.children);

    // console.log(ul.childNodes[0]);
    // console.log(ul.children[0]);

    // 第一个子节点  第一个子元素
    // Element.firstChild          第一个子节点
    // Element.firstElementChild   第一个子元素
    // console.log(ul.firstChild);
    // console.log(ul.firstElementChild);

    // 最后一个子节点  最后一个子元素
    // Element.lastChild          最后一个子节点
    // Element.lastElementChild   最后一个子元素
    // console.log(ul.lastChild);
    // console.log(ul.lastElementChild);


    // 父节点  父元素
    // Element.parentNode
    // Element.parentElement

    // console.log(ul.parentNode);
    // console.log(ul.parentElement);

    // var html = document.documentElement;
    // console.log(html.parentNode);  // html(根节点) => 父节点(document)
    // console.log(html.parentElement); // null (html没有父元素)


    // 同胞节点  同级元素   (有相同的父元素)

    // 前一个同胞节点  前一个同级元素    (previous:先前的  Sibling:同胞,兄弟,姐妹)
    // Element.previousSibling     前一个同胞节点
    // Element.previousElementSibling   前一个同级元素
    // console.log(mid.previousSibling);
    // console.log(mid.previousElementSibling);

    // 后一个同胞节点  后一个同级元素    
    // Element.nextSibling    后一个同胞节点
    // Element.nextElementSibling  后一个同级元素

    console.log(mid.nextSibling);
    console.log(mid.nextElementSibling);












</script>

</html>